<template>
	<view class="According">
		<statusBar />
		<!-- 设置 -->
		<view class="nav" @tap="leftIndex">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>数据 
			  <text v-if="current==1">-营业</text>
			  <text v-if="current==2">-流量</text>
			  <text v-if="current==3">-营销</text>
			  <text v-if="current==4">-商品</text>
			  <text v-if="current==5">-顾客</text>
			  <text v-if="current==6">-服务</text>
			</view>
		</view>
		<!-- 总览 -->
		<view class="overview">
			<view><u-tabs :list="list" active-color="#FFFFFF" inactive-color="#FFFFFF" bg-color="none" :is-scroll="true" :current="current" @change="change"></u-tabs></view>
		</view>
		
		<!-- 总览 -->
        <view v-if="current==0">
			<Browse></Browse>
		</view>
		<!-- 营业 -->
		<view v-if="current==1">
			<Business></Business>
		</view>
		<!-- 流量 -->
		<view v-if="current==2">
			<Traffic></Traffic>
		</view>
		<!-- 营销 -->
		<view v-if="current==3">
			<Marketing></Marketing>
		</view>
	</view> 
</template> 
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast'; 
import request from '@/utils/request';
import statusBar from '../../components/statusBar/statusBar.vue';
import Browse from '@/components/Browse.vue';//总览
import Business from '@/components/Business.vue';//营业
import Traffic from '@/components/Traffic.vue';//流量
import Marketing from '@/components/marketing.vue';//营销
export default {
	data() {
		return {
			list: [
				{
					name: '总览'
				},
				{
					name: '营业'
				},
				{
					name: '流量'
				},
				{
					name: '营销'
				},
				{
					name: '商品'
				},
				{
					name: '顾客'
				},
				{
					name: '服务'
				}
			],
			current: 0,
			
			
		};
	},
	components: {
		statusBar,
		Browse,//总览
		Business,//营业
		Traffic,//流量
		Marketing,//营业
	},
	
	methods: {
		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		change(index) {
			this.current = index;
		},
		
	}
};
</script>
<style lang="scss" scoped>
.According {

	.nav {
		display: flex;
		align-items: center;
		padding: 50upx 30upx 31upx 30upx;
		background: $bg1-color;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;

		image {
			width: 27upx;
			height: 30upx;
			display: flex;
		}
		& > view {
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $bg2-color;
			margin-left: 30upx;
		}
	}
	// 2
	.overview {
		padding-top: 80upx;
		overflow-y: hidden;
		& > view:nth-child(1) {
			background: rgba(53, 57, 76, 1);
			width: 100%;
			padding-top: 40upx;
			padding-bottom: 18upx;
		}
	}
	
}
</style>